import React, { useState } from 'react'
import Taro, { FC } from '@tarojs/taro'
import { View, Image, Text, Swiper, SwiperItem } from '@tarojs/components'
import { AtIcon } from 'taro-ui'

import ReleaseBtn from '@/components/ReleaseBtn'
import './index.scss'

const My: FC = () => {
  const [userInfo] = useState(() => {
    if (Taro.getStorageSync('userInfo')) {
      return JSON.parse(Taro.getStorageSync('userInfo'))
    } else {
      return {}
    }
  })

  // 退出登录
  function handSetup() {
    Taro.navigateTo({ url: '/pages/MySettings/index' })
  }
  // 身份认证状态
  function identityCertified(status) {
    status = Number(status)
    switch (status) {
      case 0:
        return '认证中'
      case 1:
        return '已通过'
      case 2:
        return '认证失败'
      case 3:
        return '未认证'
    }
  }
  // 我借出的物品
  const borrowedItems = [
    {
      icon: 'dzf',
      title: '待支付',
      id: 1
    },
    {
      icon: 'dfh',
      title: '待发货',
      id: 2
    },
    {
      icon: 'dsh',
      title: '待收货',
      id: 3
    },
    {
      icon: 'dgh',
      title: '待归还',
      id: 4
    },
    {
      icon: 'ghz',
      title: '归还中',
      id: 5
    },
    {
      icon: 'pjhjf',
      title: '评价和纠纷',
      id: 6
    }
  ]
  // 我借入的物品
  const lendingitems = [
    {
      icon: 'dfh',
      title: '待发货',
      id: 1
    },
    {
      icon: 'dsh',
      title: '待收货',
      id: 2
    },
    {
      icon: 'dgh',
      title: '待归还',
      id: 3
    },
    {
      icon: 'ghz',
      title: '归还中',
      id: 4
    },
    {
      icon: 'pjhjf',
      title: '评价和纠纷',
      id: 5
    }
  ]
  // 我发布的活动
  const launchActivities = [
    {
      icon: 'daishenhe',
      title: '待审核',
      id: 1
    },
    {
      icon: 'dtf',
      title: '待退分',
      id: 2
    },
    {
      icon: 'dks',
      title: '待开始',
      id: 3
    },
    {
      icon: 'djs',
      title: '待结束',
      id: 4
    },
    {
      icon: 'ytg',
      title: '已通过',
      id: 5
    },
    {
      icon: 'wtg',
      title: '未通过',
      id: 6
    }
  ]
  // 我参加的活动
  const joinActivities = [
    {
      icon: 'dtf',
      title: '待退分',
      id: 1
    },
    {
      icon: 'dks',
      title: '待开始',
      id: 2
    },
    {
      icon: 'dqd',
      title: '待签到',
      id: 3
    },
    {
      icon: 'dqt',
      title: '待签退',
      id: 4
    },
    {
      icon: 'dfjf',
      title: '待付积分',
      id: 5
    },
    {
      icon: 'yqx',
      title: '已取消',
      id: 6
    }
  ]
  // 质量投诉
  const qualityComplaint = [
    {
      icon: 'daishenhe',
      title: '待审核',
      id: 1
    },
    {
      icon: 'dcl',
      title: '待处理',
      id: 2
    },
    {
      icon: 'clz',
      title: '处理中',
      id: 3
    },
    {
      icon: 'ywc',
      title: '已完成',
      id: 4
    }
  ]
  // 问题
  const question = [
    {
      icon: 'quanbu',
      title: '全部',
      id: 1
    },
    {
      icon: 'dcl',
      title: '待处理',
      id: 2
    },
    {
      icon: 'clz',
      title: '处理中',
      id: 3
    },
    {
      icon: 'ytg',
      title: '已处理',
      id: 4
    }
  ]

  function jumpOrderList(type, seq = 0) {
    Taro.navigateTo({ url: '/pages/OrderList/index?type=' + type + '&seq=' + seq })
  }
  return (
    <View className='mutualShare'>
      <Swiper
        className='test-h'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        indicatorDots
        autoplay
      >
        <SwiperItem>
          <View className='demo-text-1'>
            <Image src='https://img13.360buyimg.com/ling/jfs/t1/139024/36/900/347788/5ee9cc27Effb0c16b/ce004d13e1a1479c.png'></Image>
          </View>
        </SwiperItem>
        <SwiperItem>
          <View className='demo-text-2'>
            <Image src='http://storage.jd.com/taro-source/jd-mp/taro-jd-com-banner.png'></Image>
          </View>
        </SwiperItem>
        <SwiperItem>
          <View className='demo-text-3'>
            <Image src='https://img13.360buyimg.com/ling/jfs/t1/139024/36/900/347788/5ee9cc27Effb0c16b/ce004d13e1a1479c.png'></Image>
          </View>
        </SwiperItem>
      </Swiper>
      {/* userInfo */}
      <View className='userInfo center-common'>
        <View className='userInfo-top'>
          <Image src={userInfo.avatarUrl} className='userInfo-picture'></Image>
          <View className='userInfo-msg'>
            <View className='userInfo-msg--name'>{userInfo.name}</View>
            <View className='userInfo-msg--integral'>当前积分：{userInfo.points}</View>
          </View>
          <View className='userInfo-attestation'>
            <AtIcon prefixClass='icon' value='yrz' size='15' color='#c50001'></AtIcon>
            <Text className='userInfo-attestation--text'>
              {identityCertified(userInfo.identityCertified)}
            </Text>
          </View>
          <View className='userInfo-signin'>
            <AtIcon prefixClass='icon' value='qd' size='12' color='#fff'></AtIcon>
            <Text className='userInfo-signin--text'>签到</Text>
          </View>
        </View>
        {/* userinfo底部 */}
        <View className='userInfo-bottom'>
          <View className='lr-center'>
            <View className='wpjn-image userInfo-bottom--img'>
              <AtIcon prefixClass='icon' value='wpjn' size='25' color='#fff'></AtIcon>
            </View>
            <View className='userInfo-bottom--text'>物品技能</View>
          </View>
          <View>
            <View className='wdsc-image userInfo-bottom--img '>
              <AtIcon prefixClass='icon' value='wdsc' size='25' color='#fff'></AtIcon>
            </View>
            <View className='userInfo-bottom--text'>我的收藏</View>
          </View>
          <View>
            <View className='wddz-image userInfo-bottom--img '>
              <AtIcon prefixClass='icon' value='wddz' size='25' color='#fff'></AtIcon>
            </View>
            <View className='userInfo-bottom--text'>我的点赞</View>
          </View>
          <View>
            <View className='wdly-image userInfo-bottom--img '>
              <AtIcon prefixClass='icon' value='wdly' size='25' color='#fff'></AtIcon>
            </View>
            <View className='userInfo-bottom--text'>我的留言</View>
          </View>
        </View>
        {/* 设置 */}
        <View className='userInfo-setup' onClick={handSetup}>
          <AtIcon prefixClass='icon' value='shezhi' size='20' color='#000'></AtIcon>
        </View>
      </View>
      {/* 我提出的问题 */}
      <View className='center-common'>
        <View className='items-title'>
          <View className='items-title--left'>我提出的问题</View>
          <View className='items-title--right'>
            更多
            <AtIcon value='chevron-right' size='20' color='#bbbbbb'></AtIcon>
          </View>
        </View>
        <View className='items-payment'>
          {question.map((ele) => {
            return (
              <View key={ele.id} className='payment--cont'>
                <View className='cont-icon'>
                  <AtIcon prefixClass='icon' value={ele.icon} size='25' color='#000'></AtIcon>
                </View>
                <View className='cont-title'>{ele.title}</View>
              </View>
            )
          })}
        </View>
      </View>
      {/* 我处理的问题 */}
      <View className='center-common'>
        <View className='items-title'>
          <View className='items-title--left'>我处理的问题</View>
          <View className='items-title--right'>
            更多
            <AtIcon value='chevron-right' size='20' color='#bbbbbb'></AtIcon>
          </View>
        </View>
        <View className='items-payment'>
          {question.map((ele) => {
            return (
              <View key={ele.id} className='payment--cont'>
                <View className='cont-icon'>
                  <AtIcon prefixClass='icon' value={ele.icon} size='25' color='#000'></AtIcon>
                </View>
                <View className='cont-title'>{ele.title}</View>
              </View>
            )
          })}
        </View>
      </View>
      {/* 我借入的物品 */}
      <View className='borrowedItems center-common'>
        <View className='items-title'>
          <View className='items-title--left'>我借入的物品</View>
          <View
            className='items-title--right'
            onClick={() => {
              jumpOrderList('orderListIn')
            }}
          >
            更多
            <AtIcon value='chevron-right' size='20' color='#bbbbbb'></AtIcon>
          </View>
        </View>
        <View className='items-payment'>
          {borrowedItems.map((ele) => {
            return (
              <View
                key={ele.id}
                className='payment--cont'
                onClick={() => {
                  jumpOrderList('orderListIn', ele.id)
                }}
              >
                <View className='cont-icon'>
                  <AtIcon prefixClass='icon' value={ele.icon} size='25' color='#000'></AtIcon>
                </View>
                <View className='cont-title'>{ele.title}</View>
              </View>
            )
          })}
        </View>
      </View>
      {/* 我借出的物品 */}
      <View className='lendingItems center-common'>
        <View className='items-title'>
          <View className='items-title--left'>我借出的物品</View>
          <View
            className='items-title--right'
            onClick={() => {
              jumpOrderList('orderListOut')
            }}
          >
            更多
            <AtIcon value='chevron-right' size='20' color='#bbbbbb'></AtIcon>
          </View>
        </View>
        <View className='items-payment'>
          {lendingitems.map((ele) => {
            return (
              <View
                key={ele.id}
                className='payment--cont'
                onClick={() => {
                  jumpOrderList('orderListOut', ele.id)
                }}
              >
                <View className='cont-icon'>
                  <AtIcon prefixClass='icon' value={ele.icon} size='25' color='#000'></AtIcon>
                </View>
                <View className='cont-title'>{ele.title}</View>
              </View>
            )
          })}
        </View>
      </View>
      {/* 我发布的活动 */}
      <View className='center-common'>
        <View className='items-title'>
          <View className='items-title--left'>我发布的活动</View>
          <View className='items-title--right'>
            更多
            <AtIcon value='chevron-right' size='20' color='#bbbbbb'></AtIcon>
          </View>
        </View>
        <View className='items-payment'>
          {launchActivities.map((ele) => {
            return (
              <View key={ele.id} className='payment--cont'>
                <View className='cont-icon'>
                  <AtIcon prefixClass='icon' value={ele.icon} size='25' color='#000'></AtIcon>
                </View>
                <View className='cont-title'>{ele.title}</View>
              </View>
            )
          })}
        </View>
      </View>
      {/* 我参加的活动 */}
      <View className='center-common'>
        <View className='items-title'>
          <View className='items-title--left'>我参加的活动</View>
          <View className='items-title--right'>
            更多
            <AtIcon value='chevron-right' size='20' color='#bbbbbb'></AtIcon>
          </View>
        </View>
        <View className='items-payment'>
          {joinActivities.map((ele) => {
            return (
              <View key={ele.id} className='payment--cont'>
                <View className='cont-icon'>
                  <AtIcon prefixClass='icon' value={ele.icon} size='25' color='#000'></AtIcon>
                </View>
                <View className='cont-title'>{ele.title}</View>
              </View>
            )
          })}
        </View>
      </View>
      {/* 我的质量投诉 */}
      <View className='center-common'>
        <View className='items-title'>
          <View className='items-title--left'>我的质量投诉</View>
          <View className='items-title--right'>
            更多
            <AtIcon value='chevron-right' size='20' color='#bbbbbb'></AtIcon>
          </View>
        </View>
        <View className='items-payment'>
          {qualityComplaint.map((ele) => {
            return (
              <View key={ele.id} className='payment--cont'>
                <View className='cont-icon'>
                  <AtIcon prefixClass='icon' value={ele.icon} size='25' color='#000'></AtIcon>
                </View>
                <View className='cont-title'>{ele.title}</View>
              </View>
            )
          })}
        </View>
      </View>
      <ReleaseBtn />
    </View>
  )
}

My.options = {
  addGlobalClass: true
}
export default My
